<template>
	<view class="" style="width: 100vw;height: 100vh">
	<!-- <view class="content" style="min-height: 100vh"> -->
		<!-- <image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		
		<hx-navbar title="交易完成" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="container">
			<view class="status_box">
				<view>
					<view class="title">交易成功</view>
					<view class="text">您购买的数字科技商品已付款成功</view>
				</view>
				<view class="status_img_box">
					<image src="/static/user/status_ok.png" mode="widthFix" class="ok_img"></image>
					<!-- <image src="../../static/user/point.png" mode="widthFix" class="point"></image> -->
				</view>
			</view>
			<view class="collection_info">
				<image :src="paymentInfo.goods_image" mode="aspectFit" class="collect_image"></image>
				<view class="collect_info">
					<view class="title">{{paymentInfo.goods_name}}</view>
					<view class="code">{{paymentInfo.goods_code}}</view>
					<view class="tip">金世界版权</view>
					<view class="seldingdan" @click="selDingdan">
						<text>查看我的订单</text> <image class="image" src="@/static/index/more.png"  mode=""></image> </view>
				</view>
			</view>
			<!-- <view class="goods_item">
				<image :src="paymentInfo.goods_image" mode="aspectFill" class="goods_imgg"></image>
				<view class="goods_right">
					<view class="goods_namee">
						{{paymentInfo.goods_name}}
					</view>
					<view class="color-9 fsz24 m-t-10">
						KT数字版权
					</view>
					<view class="num_box m-t-20">
						<view class="num_left">
							<text>编号</text>
						</view>
						<view class="num_right">
							{{paymentInfo.goods_code}}
						</view>
					</view>
				</view>
			</view> -->
			<view class="order_info">
				<!-- <view class="order_item">
					创建时间
					<view class="value">
						{{paymentInfo.ctime}}
					</view>
				</view> -->
				<view class="order_item">
					订单金额
					<view class="value">
						￥{{paymentInfo.money}}
					</view>
				</view>
				<!-- <view class="order_item">
					交易数量
					<view class="value">
						1
					</view>
				</view> -->
				<view class="order_item">
					付款时间
					<view class="value">
						{{paymentInfo.payment_time}}
					</view>
				</view>
				<view class="order_item">
					订单编号
					<view class="value">
						{{paymentInfo.payment_id}}
					</view>
				</view>
				<!-- <view class="order_item" v-if="paymentInfo.trade_no">
					交易号
					<view class="value">
						{{paymentInfo.trade_no}}
					</view>
				</view> -->
			</view>
		</view>
		<!-- <view class="bottom_box" style="z-index: 20;">
			<view class=" submit_btn" @tap="orderDetail">
				<text>
					确定
				</text>
			</view>
		</view> -->
	</view>
</view></template>
<script>
	export default {
		data() {
			return {
				paymentId: 0,
				paymentInfo: {}, // 支付单详情
				orderId: 0,
				status: false
			};
		},
		onLoad(options) {
			if (options.id) {
				this.paymentId = options.id;
			}
			if (options.order_id) {
				this.orderId = options.order_id;
			}

		},
		mounted() {
			this.getPaymentInfo();
		},
		methods: {
			selDingdan(){
				uni.reLaunch({
					url:"/pages/user/order/order"
				})
			},
			getPaymentInfo() {
				if (!this.paymentId) {
					this.status = true;
					this.paymentInfo.money = '0.00';
					this.paymentInfo.status = 2;
					this.paymentInfo.type = 1;
					return;
				}
				let data = {
					payment_id: this.paymentId
				};

				this.$api.paymentInfo(data, res => {
					if (res.status) {
						let info = res.data;
						console.log(info, '====')
						if (info.payment_code === 'alipay') {
							info.payment_name = '支付宝支付';
						} else if (info.payment_code === 'wechatpay') {
							info.payment_name = '微信支付';
						} else if (info.payment_code === 'balancepay') {
							info.payment_name = '余额支付';
						}

						// 获取订单号
						if (info.rel.length) {
							for (let i = 0; i < info.rel.length; i++) {
								if (info.rel[i].source_id) {
									this.orderId = info.rel[i].source_id;
									break;
								}
							}
						}
						this.status = true;
						this.paymentInfo = info;
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			},
			orderDetail() {

				uni.switchTab({
					url: '/pages/index/index'
				});

			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		padding: 0 20rpx;
		margin-top: 40rpx;
		position: relative;
		z-index: 10;
	}
	.collection_info {
		width: 100%;
		background-color: $bg-box;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		.collect_image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
			display: block;
			margin-right: 26rpx;
		}
		.collect_info {
			flex: 1;
			.title {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
			}
			.code {
				font-size: 24rpx;
				color: #863A3A;
				font-weight: 400;
				margin: 5rpx 0 20rpx;
			}
			.tip {
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
			}
		}
	}
	// .num_box {
	// 	display: flex;
	// 	align-items: center;
	// 	margin-top: 10rpx;
	// 	flex-wrap: wrap;

	// 	.num_left {
	// 		width: 70rpx;
	// 		height: 40rpx;
	// 		font-size: 22rpx;
	// 		font-weight: 500;
	// 		line-height: 1;
	// 		color: #030303;
	// 		border-radius: 5rpx 0px 0px 5rpx;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		position: relative;
	// 		z-index: 10;
	// 		background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
	// 		margin-bottom: 10rpx;

	// 	}

	// 	.num_right {
	// 		height: 40rpx;
	// 		font-size: 22rpx;
	// 		border-radius: 0px 5rpx 5rpx 0px;
	// 		white-space: nowrap;
	// 		opacity: 1;
	// 		padding: 0 12rpx;
	// 		color: #F4E1BC;
	// 		border: 1rpx solid #F4E1BC;
	// 		border-left: none;
	// 		font-weight: normal;
	// 		line-height: 38rpx;
	// 		margin-bottom: 10rpx;
	// 	}

	// }















	// .goods_item {
	// 	width: 100%;
	// 	padding: 27rpx 23rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	margin-top: 30rpx;
	// 	// border-radius: 20rpx;
	// 	background-color: $bg-box;
	// 	// box-shadow: 0rpx -5rpx 10rpx 1rpx rgba(0, 0, 0, 0.16);

	// 	.goods_right {
	// 		flex: 1;
	// .goods_namee {
	// 	width: 100%;
	// 	font-size: 32rpx;
	// 	font-weight: 800;
	// 	color: #fff;
	// 	line-height: 45rpx;
	// }

	// 	}

	// 	.goods_imgg {
	// 		width: 240rpx;
	// 		height: 240rpx;
	// 		margin-right: 17rpx;
	// 		border-radius: 20rpx;
	// 		position: relative;
	// 		z-index: 10;
	// 	}

	// }
</style>
<style lang="scss" scoped>
	.login_btn {
		background: #000;
		border-radius: 10rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.order_item {
		width: 100%;
		padding: 15rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #000;
		font-weight: 400;
	}
	.value {
		color: #666;
	}
	.order_info {
		width: 100%;
		background-color: $bg-box;
		border-radius: 20rpx;
		padding: 15rpx 20rpx;
	}

	.point {
		width: 35rpx;
		height: 33rpx;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
		animation: show 0.1s ease-out 1.5s forwards;
		transition: all .5s;
		z-index: 8;
	}

	@keyframes show {
		0% {
			top: 40rpx;
			right: 40rpx;
			opacity: 0;
		}

		100% {
			top: 0;
			right: 0;
			opacity: 1;
		}
	}
	.status_box {
		width: 100%;
		height: 232rpx;
		background-color: $bg-box;
		border-radius: 20rpx;
		padding: 0 67rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.ok_img {
			height: 125rpx;
			width: 125rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			animation:
				tiantiao1 0.5s ease-in 1 forwards,
				tiantiao2 0.2s ease-out 0.5s 1 forwards,
				tiantiao3 0.2s ease-in 0.7s 1 forwards,
				tiantiao4 0.15s ease-out 0.9s 1 forwards,
				tiantiao5 0.15s ease-in 1.05s 1 forwards;
			z-index: 9;
		}
		@keyframes tiantiao1 {
			0% {
				transform: translateY(-500px);
			}

			100% {
				transform: translateY(0);
			}
		}
		@keyframes tiantiao2 {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-100px);
			}
		}
		@keyframes tiantiao3 {
			0% {
				transform: translateY(-100px);
			}

			100% {
				transform: translateY(0);
			}
		}
		@keyframes tiantiao4 {
			0% {
				transform: translateY(0px);
			}

			100% {
				transform: translateY(-50px);
			}
		}
		@keyframes tiantiao5 {
			0% {
				transform: translateY(-50px);
			}

			100% {
				transform: translateY(0);
			}
		}
		.status_img_box {
			width: 131rpx;
			height: 141rpx;
			position: relative;
		}
		.title {
			font-size: 40rpx;
			color: #000;
			font-weight: bold;
		}
		.text {
			font-size: 24rpx;
			color: #000;
			font-weight: 400;
			margin-top: 10rpx;
		}
	}
	.seldingdan{
	
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.text{
			color: #000;
			font-weight:600;
			font-size: 36rpx;
		}
		.image{
			width: 18rpx;
			height: 25rpx;
			margin-left: 10rpx;
		}
	}
</style>